(function () {
    'use strict';
    kintone.events.on('portal.show', function (res) {
        const pcSetting = {
            type: 'pc',
            legend: { top: '10%' },
            grid: { left: '10%', width: '35%', top: '25%' },
            pie: { center: ['70%', '60%'], radius: '50%' },
            style: "width: auto;height:400px;background-color:#fff;margin: 16px 16px 0 16px;"
        };
        init(pcSetting);
        generateGraph(pcSetting);
    });

    kintone.events.on('mobile.portal.show', function (res) {
        const mobileSetting = {
            type: 'mobile',
            legend: { top: '5%' },
            grid: { left: '10%', height: '40%', top: '18%' },
            pie: { center: ['50%', '80%'], radius: '30%' },
            style: "width: auto;height:600px;background-color:#fff;margin: 10px 10px 0 10px;border-radius: 6px"
        };
        init(mobileSetting);
        generateGraph(mobileSetting);
    });

    function generateGraph(setting) {
        var kintoneRecord = new kintoneJSSDK.Record();
        var rcOption = {
            app: xxx,
            query: 'order by date asc'
        };

        var myChart = echarts.init(document.getElementById('graph'));
        myChart.on('updateAxisPointer', function (event) {
            var xAxisInfo = event.axesInfo[0];
            if (xAxisInfo) {
                var dimension = xAxisInfo.value + 1;
                myChart.setOption({
                    series: {
                        id: 'pie',
                        label: {
                            formatter: '{b}: {@[' + dimension + ']} ({d}%)'
                        },
                        encode: {
                            value: dimension,
                            tooltip: dimension
                        }
                    }
                });
            }
        });
        setInterval(function setchart() {
            kintoneRecord.getAllRecordsByCursor(rcOption).then((rsp) => {
                var records = rsp.records;
                var graphData = { 'channel1': ['京东'], 'channel2': ['淘宝'], 'channel3': ['拼多多'], 'channel4': ['天猫'], 'channel5': ['考拉'] };
                var dateArray = ['渠道'];
                for (var record of records) {
                    var dateKey = record.date.value;
                    graphData.channel1.push(record.channel1.value);
                    graphData.channel2.push(record.channel2.value);
                    graphData.channel3.push(record.channel3.value);
                    graphData.channel4.push(record.channel4.value);
                    graphData.channel5.push(record.channel5.value);
                    dateArray.push(dateKey);
                }
                var option = {
                    legend: setting.legend,
                    title: {
                        text: '2019双十一各渠道实时销量统计',
                        left: 'center'
                    },
                    tooltip: {
                        trigger: 'axis',
                        showContent: false
                    },
                    dataset: {
                        source: [
                            dateArray,
                            graphData.channel1,
                            graphData.channel2,
                            graphData.channel3,
                            graphData.channel4,
                            graphData.channel5
                        ]
                    },
                    xAxis: { type: 'category' },
                    yAxis: { gridIndex: 0, name: '单位（万台）' },
                    grid: setting.grid,
                    series: [
                        { type: 'line', smooth: true, seriesLayoutBy: 'row' },
                        { type: 'line', smooth: true, seriesLayoutBy: 'row' },
                        { type: 'line', smooth: true, seriesLayoutBy: 'row' },
                        { type: 'line', smooth: true, seriesLayoutBy: 'row' },
                        { type: 'line', smooth: true, seriesLayoutBy: 'row' },
                        {
                            type: 'pie',
                            id: 'pie',
                            radius: setting.pie.radius,
                            center: setting.pie.center,
                            label: {
                                formatter: '{b}: {@2019-11-11} ({d}%)'
                            },
                            encode: {
                                itemName: '渠道',
                                value: '2019-11-11',
                                tooltip: '2019-11-11'
                            }
                        }
                    ]
                };
                myChart.setOption(option);
            }).catch((err) => {
                document.getElementById('graph').innerText = "获取数据失败";
            });
            return setchart;
        }(), 3000)
    }

    function init(setting) {
        if (document.getElementById('graph') !== null) {
            return;
        }
        var graph = document.createElement('div');
        graph.id = 'graph';
        graph.style = setting.style;
        if (setting.type === "mobile") {
            kintone.mobile.portal.getContentSpaceElement().appendChild(graph);
        }
        else {
            kintone.portal.getContentSpaceElement().appendChild(graph);
        }
    }
}());